<template>
  <div>
    <el-button @click="changeLanguage('en')">English</el-button>
    <el-button @click="changeLanguage('zh')">中文</el-button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { locale } = useI18n();

const changeLanguage = (lang: string) => {
  locale.value = lang;
  localStorage.setItem('lang', lang);
};
</script>
<!-- <template>
    <div>
      <el-select v-model="currentLocale" @change="changeLanguage">
        <el-option label="中文" value="zh"></el-option>
        <el-option label="English" value="en"></el-option>
      </el-select>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  
  export default defineComponent({
    name: 'LanguageSwitcher',
    setup() {
      const { locale } = useI18n();
      const currentLocale = ref(locale.value);
  
      const changeLanguage = (lang: string) => {
        locale.value = lang;
      };
  
      return {
        currentLocale,
        changeLanguage,
      };
    },
  });
  </script> -->